<template>
  <svg :class="['app-svg-icon', $attrs.class]" :style="{ width: icosize,height: icosize}" aria-hidden="true">
    <use :xlink:href="'#icon-' + name" :fill="color"/>
  </svg>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'SvgIcon',
  props: {
    name: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: '',
    },
    size: {
      type: [Number, String],
      default: 14,
    },
  },
  setup(props) {
    const icosize = (typeof props.size === 'number') ? (props.size + 'px') : props.size
    return {
      icosize
    }
  }
});
</script>